<template>
  <view class="t_container">
	<view :style="{ paddingTop: navBarHeight + 'px' }"></view>
    <custom-navbar title="充值" background="#FFD694" color="#ffffff"  :testStyle="{justifyContent:'flex-start'}" :showBack="isShow" />
    <view class="head">
      <view class="img_box">
        <image src="/static/card_bg.png" mode=""></image>
        <view class="card-info">
          <view class="card-name">{{ cardInfo.name }}</view>
          <view class="card-name">{{ cardInfo.num }}</view>
          <view class="card-num"
            >余额：<text style="font-size: 36rpx">{{
              cardInfo.balance
            }}</text></view
          >
        </view>
      </view>
    </view>
    <!-- 充值明细 -->
    <view class="topup_detal">
      <view style="color: #595757">充值明细</view>
      <view style="color: #e62129" v-if="useStore.jugleCode!=10000">去充值</view>
    </view>
    <!-- 明细列表 -->
    <view class="details" style="margin-bottom: 30rpx;" :style="{height:`calc(100vh - 174rpx - 410rpx - ${navBarHeight}px - 30rpx`}">
      <view class="box" v-for="(item, i) in 13" :key="i">
        <view class="details_1">
          <view>充值</view>
          <view style="color: #e62129">-130.00</view>
        </view>
        <view class="details_1">
          <view>2025-03-22-13:23</view>
          <view>充卡成功</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import CustomNavbar from "@/components/navbar.vue";
import { ref } from "vue";
import { useMyStore } from "../../store";
const useStore = useMyStore();
const isShow = getCurrentPages().length>1 ? true:false;
const navBarHeight = ref(getApp().globalData.navBarHeight);
// card 信息
const cardInfo = ref({
  name: "招商银行 -卡通",
  num: "458456921345687954",
  balance: "1.19",
});




</script>

<style lang="scss" scoped>
.t_container {
  min-height: 100vh;
  box-sizing: border-box;
//   display: flex;
//   flex-direction: column;

  .head {
    background: linear-gradient(179deg, #FFD694 19%, #F8F8F8 63%);
    height: 410rpx;
    border-bottom-left-radius: 60rpx;
    border-bottom-right-radius: 60rpx;

    .img_box {
      position: relative;
      height: 100%;
      box-sizing: border-box;
      padding: 0 27rpx;
      image {
		width: 690rpx;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        height: 384rpx;
      }

      .card-info {
        height: 382rpx;
        // border: 1rpx solid blue;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%); /* 精确居中 */
        width: 690rpx; /* 控制信息区域宽度 */
        text-align: center; /* 文字居中 */
        color: #ffffff; /* 文字颜色，根据图片背景调整 */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 30rpx;
        box-sizing: border-box;

        .card-name {
          font-size: 36rpx;
          font-weight: bold;
          margin-bottom: 20rpx;
        }

        .card-num {
          font-size: 32rpx;
        }
      }
    }
  }
  .topup_detal {
    display: flex;
    justify-content: space-between;
    padding: 50rpx 66rpx 82rpx;
    box-sizing: border-box;
    // border: 1rpx solid red;
  }
  .details {
	// padding-bottom: 30rpx;
    font-size: 30rpx;
	// 用阴影写不会占px
	// box-shadow: 0rpx -2rpx 1rpx 1rpx rgba(104, 103, 103, 0.5);
	overflow: auto;
    .box {
      padding: 15rpx 0;
      box-sizing: border-box;
      .details_1 {
        display: flex;
        justify-content: space-between;
        padding: 4rpx 74rpx;
        box-sizing: border-box;
      }
    }
  }
}
</style>
